<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <style>
        body{
            background-color: black;
            margin: 0;/*去掉自带的8个像素边距*/
        }
    </style>
</head>
<body>

<script>
    //开启添加雪花的定时器
    setInterval(function () {
        //得到窗口宽和高
        let w = $(window).width();
        let h = $(window).height();
        //创建雪花图片
        let img = $("<img src='003.jpg'>");
        //得到一个随机雪花尺寸  20-40
        let size = parseInt(Math.random()*21)+20;
        //得到雪花随机的left值 距离左侧的位置
        let left = parseInt(Math.random()*(w-size));

        //把雪花设置为绝对定位(为了灵活控制雪花的位置
        img.css({"width":size+"px","position":"absolute","left":left+"px"});
        $("body").append(img);
        //添加到页面中之后做往下移动的动画
        //雪花越小移动速度越快 雪花尺寸20-40     *100     2000-4000
        img.animate({"top":h-size+"px"},size*100).fadeOut(1000,function () {
            //把雪花删除  不然越来越慢
            img.remove();
        });
    },1);
</script>
</body>
</html>